<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" href="../js/miniui/miniui.css" />
    <script src="../js/jquery-3.3.1.min.js"></script>
    <script src="../js/vue.min.js"></script>
    <script src="../js/config.js"></script>
    <style>
        
        html, body {
            padding: 0px;
            margin: 0px;
        }
        #app {
            height: 100%;
            position: absolute;
            top: 0px;
            width:100%;
        }
        .left {
            width: 240px;
            border-right: 1px solid #dddddd;
            height: 100%;
            float: left;
            overflow: auto;
        }
        .right {
            width: calc(100% - 241px);
            height: 100%;
            float: left;
            overflow:auto;
        } 
        .searh_len {
            height: 64px;
            width: 200px;
        }

            .searh_len input {
                margin-top: 10px;
                margin-left: 10px;
                padding-left: 10px;
                height: 34px;
                width: 100%;
            }

        .item {
            height: 44px;
            line-height: 44px;
            border-bottom: 1px solid #dddddd;
            padding-left: 12px;
            overflow:hidden;
            font-size:12px;
        }
         .item .names {
                height: 30px;
                line-height: 29px;
                overflow:hidden;
            }
        .item .names {
                height: 30px;
                line-height: 44px;
            }
        .setCa {
            background-color: #008e8e;
            color: white;
        }
        .mini-grid-row {
            background-color: #fff;
        }

        .colorbg {
            background-color: aliceblue;
        }
        .mini-grid-headerCell, .mini-grid-cell{
            height: 34px;
            line-height: 34px;
        }
        .mini-grid-columns-view {
            overflow:initial;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="left">

            <div class="searh_len">
                <input type="text" v-model="path" placeholder="车牌号"/>
               
            </div>
            <div>
            <div class="item" v-for="item in list" @click="SetClick(item)"  :class="{setCa:item.active}">
                <div class="names">({{item.num}})-{{item.ComapnyName}}</div>   
                <!--  <div class="num">车辆数量:</div>   -->
                </div>
            </div>
        </div>
        <div class="right">
         <!--   <div class="item" v-for="item in listCompany" >{{item.PlateNumber}}</div>-->




            <div class="mini-grid-rows-view" style="margin-left: 0px; width: 100%;">
                <div class="mini-grid-columns-view" style="margin-left: 0px; width: auto; height: auto; padding-right: 0px;">
                    <table class="mini-grid-table" cellspacing="0" cellpadding="0" border="0" style="width: 100%;">
                        <tbody>
                            <tr style="height:0px;">
                                <td style="height:0px;width:0;"></td>
                                <td id="2" style="padding:0;border:0;margin:0;height:0px;width:50px"></td>
                                <td id="3" style="padding:0;border:0;margin:0;height:0px;width:120px"></td>
                                <td id="4" style="padding:0;border:0;margin:0;height:0px;width:280px"></td>
                                <td id="5" style="padding:0;border:0;margin:0;height:0px;width:280px"></td>
                                <td id="6" style="padding:0;border:0;margin:0;height:0px;width:120px"></td>
                                <td id="7" style="padding:0;border:0;margin:0;height:0px;width:120px"></td>
                                <td id="8" style="padding:0;border:0;margin:0;height:0px;width:120px"></td>
                                <td id="9" style="padding:0;border:0;margin:0;height:0px;width:120px"></td>
                                <td id="10" style="padding:0;border:0;margin:0;height:0px;width:120px"></td>
                                <td style="width:0px;"></td>
                            </tr>
                            <tr>
                                <td style="width:0;"></td>
                                <td id="mini-69$headerCell2$2" class="mini-grid-headerCell    mini-grid-bottomCell " style="text-align:center;">
                                    <div class="mini-grid-headerCell-outer">
                                        <div class="mini-grid-headerCell-inner  mini-grid-headerCell-nowrap ">序号</div>
                                        <div id="2" class="mini-grid-column-splitter"></div>
                                    </div>
                                </td>
                                <td id="mini-69$headerCell2$3" class="mini-grid-headerCell    mini-grid-bottomCell " style="text-align:center;">
                                    <div class="mini-grid-headerCell-outer">
                                        <div class="mini-grid-headerCell-inner  mini-grid-headerCell-nowrap ">车牌号</div>
                                        <div id="3" class="mini-grid-column-splitter"></div>
                                    </div>
                                </td>
                                <td id="mini-69$headerCell2$4" class="mini-grid-headerCell    mini-grid-bottomCell " style="text-align:center;">
                                    <div class="mini-grid-headerCell-outer">
                                        <div class="mini-grid-headerCell-inner  mini-grid-headerCell-nowrap ">GUID</div>
                                        <div id="4" class="mini-grid-column-splitter"></div>
                                    </div>
                                </td>
                             
                                <td id="mini-69$headerCell2$4" class="mini-grid-headerCell    mini-grid-bottomCell " style="text-align:center;">
                                    <div class="mini-grid-headerCell-outer">
                                        <div class="mini-grid-headerCell-inner  mini-grid-headerCell-nowrap ">车辆编号</div>
                                        <div id="5" class="mini-grid-column-splitter"></div>
                                    </div>
                                </td>
                                <td id="mini-69$headerCell2$4" class="mini-grid-headerCell    mini-grid-bottomCell " style="text-align:center;">
                                    <div class="mini-grid-headerCell-outer">
                                        <div class="mini-grid-headerCell-inner  mini-grid-headerCell-nowrap ">设备号</div>
                                        <div id="6" class="mini-grid-column-splitter"></div>
                                    </div>
                                </td>
                                <td id="mini-69$headerCell2$4" class="mini-grid-headerCell    mini-grid-bottomCell " style="text-align:center;">
                                    <div class="mini-grid-headerCell-outer">
                                        <div class="mini-grid-headerCell-inner  mini-grid-headerCell-nowrap ">RSIM</div>
                                        <div id="7" class="mini-grid-column-splitter"></div>
                                    </div>
                                </td>
                                <td id="mini-69$headerCell2$4" class="mini-grid-headerCell    mini-grid-bottomCell " style="text-align:center;">
                                    <div class="mini-grid-headerCell-outer">
                                        <div class="mini-grid-headerCell-inner  mini-grid-headerCell-nowrap ">车辆业务类型</div>
                                        <div id="7" class="mini-grid-column-splitter"></div>
                                    </div>
                                </td>
                                <td id="mini-69$headerCell2$4" class="mini-grid-headerCell    mini-grid-bottomCell " style="text-align:center;">
                                    <div class="mini-grid-headerCell-outer">
                                        <div class="mini-grid-headerCell-inner  mini-grid-headerCell-nowrap ">是否删除</div>
                                        <div id="8" class="mini-grid-column-splitter"></div>
                                    </div>
                                </td>
                                <td class="mini-grid-headerCell    mini-grid-bottomCell " style="text-align:center;">
                                    <div class="mini-grid-headerCell-outer"><div class="mini-grid-headerCell-inner  mini-grid-headerCell-nowrap ">事件</div><div id="11" class="mini-grid-column-splitter"></div></div>
                                </td>

                            </tr>
                        </tbody>
                    </table><div class=""></div>
                </div>


                <div class="mini-grid-rows-content">
                    <table class="mini-grid-table mini-grid-rowstable" cellspacing="0" cellpadding="0" border="0" style="width: 100%;">
                        <tbody>
                            <tr style="height:0px;">
                                <td style="height:0px;width:0;"></td>
                                <td id="2" style="padding:0;border:0;margin:0;height:0px;width:50px"></td>
                                <td id="3" style="padding:0;border:0;margin:0;height:0px;width:120px"></td>
                                <td id="4" style="padding:0;border:0;margin:0;height:0px;width:280px"></td>
                                <td id="5" style="padding:0;border:0;margin:0;height:0px;width:280px"></td>
                                <td id="6" style="padding:0;border:0;margin:0;height:0px;width:120px"></td>
                                <td id="7" style="padding:0;border:0;margin:0;height:0px;width:120px"></td>
                                <td id="8" style="padding:0;border:0;margin:0;height:0px;width:120px"></td>
                                <td id="9" style="padding:0;border:0;margin:0;height:0px;width:120px"></td>
                                <td id="10" style="padding:0;border:0;margin:0;height:0px;width:120px"></td>
                                <td style="width:0px;"></td>
                            </tr>
                            <tr id="mini-69$emptytext2" style="display:none;"><td style="width:0"></td><td class="mini-grid-emptyText" colspan="12">没有返回的数据</td></tr>
                            <tr class="mini-grid-row  " style=" " v-for="(item,index) in listCompany2" :class="{colorbg:index%2==1}">
                                <td style="width:0;"></td>
                                <td class="mini-grid-cell " style="text-align:center;"><div class="mini-grid-cell-inner  mini-grid-cell-nowrap " style=""><div id="mini-69$number$7189">{{index+1}}</div></div></td>
                                <td class="mini-grid-cell " style="text-align:center;"><div class="mini-grid-cell-inner  mini-grid-cell-nowrap " style="">{{item.PlateNumber}}</div></td>
                              
                                <td class="mini-grid-cell " style="text-align:center;"><div class="mini-grid-cell-inner  mini-grid-cell-nowrap " style="">{{item.Department}}</div></td>
                                <td class="mini-grid-cell " style="text-align:center;"><div class="mini-grid-cell-inner  mini-grid-cell-nowrap " style="">{{item.Vehicle}}</div></td>

                                <td class="mini-grid-cell " style="text-align:center;"><div class="mini-grid-cell-inner  mini-grid-cell-nowrap " style="" v-if="item.device">
                                    {{item.device.Device}}</div></td>
                                <td class="mini-grid-cell " style="text-align:center;">
                                    <div class="mini-grid-cell-inner  mini-grid-cell-nowrap " style="" v-if="item.device">
                                        {{item.device.RSIM}}
                                    </div>
                                </td>
                                <td class="mini-grid-cell " style="text-align:center;">
                                    <div class="mini-grid-cell-inner  mini-grid-cell-nowrap " style="" >
                                        {{setBType(item.BType)}}
                                    </div>
                                </td>
                                <td class="mini-grid-cell " style="text-align:center;"><div class="mini-grid-cell-inner  mini-grid-cell-nowrap " style="">
                                    <div v-if="item.IsDeleted" style="color: blue;">是</div>
                                    <div v-if="item.IsDeleted==false" style="color: brown;">否</div>
                                       
                                       </div></td>

                                <td class="mini-grid-cell " style="text-align:center;">
                                    <div class="mini-grid-cell-inner  mini-grid-cell-nowrap " style="">
                                        <a href="javascript:void(0)" @click="query(item)">
                                            查看
                                        </a>
                                        &nbsp;&nbsp;
                                        <a href="javascript:void(0)" @click="del(item)">
                                           删除
                                        </a>
                                    </div>
                                </td>

                            </tr>

                        </tbody>
                    </table>
                </div>
            </div>

        </div>
        </div>

    <script>
        //ups/ztpls/bl/PullCompany

        var list = new Vue({
            el: '#app',
            data: {
                list: [{ ComapnyName: "全部", id: "1", num:0}] 
                , listCompany: [],
                listDevice: [],
                 arrCompany: []
                , path: ""
            }, computed: {
                listCompany2() {
                    let arr = [];
                    for (let i = 0; i < this.listCompany.length; i++) {
                        var si=this.listCompany[i];
                        if (si.PlateNumber.search(this.path) != -1||si.Department.search(this.path) != -1||si.Vehicle.search(this.path) != -1) {
                            arr.push(this.listCompany[i])
                        }else{
                            if(si.device){
                                    if (si.device.Device.search(this.path) != -1||si.device.RSIM.search(this.path) != -1) {
                                        arr.push(this.listCompany)
                                    }
                           }                                                                                                                       
                        }
                        
                    }
                    return arr
                }
            }
            , methods: {
                addlist: function (item) {
                  //  插入数据
                    this.list.push(item);
                },
                SetClick: function (item) {
                    //点击事件
                    this.getCart(item)
                },
                setBType: function (str) {
                
                    try {
                        var strlist = JSON.parse(str);
                        var ster = "";
                      
                        for (var u = 0; u < strlist.length; u++){
                            if (u == 0) {
                                ster = ster + strlist[u].BName
                            } else {
                                ster = ster +","+ strlist[u].BName
                            }
                        }
                        return ster;
                    } catch (e) {
                        return ""
                    }
                    
                },
                setAll: function (listtime, item) {
                    //赛选数据
                    if (item.id == "1") {
                        this.listCompany = listtime;
                        return;
                    }
                    var listCompany = [];
                    for (var n1 = 0; n1 < listtime.length; n1++) {
                        if (listtime[n1].Department == item.Company) {
                            listCompany.push(listtime[n1])
                        }
                    }
                  
                    this.listCompany = listCompany;
                    
                    //this.setGoupDevice();
                }, 
                setGoupDevice: function () {
                //    console.log(this.listCompany);
                    for (var n2 = 0; n2 < this.listDevice.length; n2++) {
                        for (var n3 = 0; n3 < this.listCompany.length; n3++) {
                            if (this.listDevice[n2].PlateNumber == this.listCompany[n3].PlateNumber) {
                              
                                this.listCompany[n3]["device"] = this.listDevice[n2];
                             //   console.log(this.arrCompany[n3]);
                            }
                        }
                    }
                },
                getDevice: function () {
                    // 
                    var _this = this;
                    httppost("ups/ztpls/bl/PullRegistration", { pageIndex: 1, pageSize: 0, IsDeleted: false, condition: {}, PlateNumber: "" },
                        function (data) {
                            _this.listDevice = data.data.result;
                            _this.setGoupDevice();
                          
                        },
                        function (err) { });
                },
                setActive: function (item) {
                    //选择公司
                    for (var n1 = 0; n1 < this.list.length; n1++) {
                        if (item.ComapnyName == this.list[n1].ComapnyName) {
                            this.list[n1].active = true;
                        } else {
                            this.list[n1].active = false;
                        }

                    }
                },
                del: function (item) {
                    var ty = {
                        type: "del",
                        data: item,
                        time: new Date().getTime()
                    }

                    window.sendlistData("Cart", ty);
                },
                query: function (item) {
                    var ty = {
                        type: "query",
                        data: item,
                        time: new Date().getTime()
                    }
                 
                    window.sendlistData("Cart", ty);
                },
                getCart: function (item) {
                    //获取车辆信息
                    this.setActive(item);
                    if (this.arrCompany.length>0) {
                        this.setAll(this.arrCompany, item);
                        return;
                    }
                    var _this = this;
                    httppost("ups/ztpls/bl/PullVehicle", { pageIndex: 1, pageSize: 0, IsDeleted: false, condition: {}, PlateNumber: "" }

                        ,
                        function (data) {
                            var listtime = data.data.result;
                           
                            _this.setAll(listtime, item);
                            _this.arrCompany = listtime;
                            _this.setCount();
                            _this.setGoupDevice();
                        },
                        function (err) { })
                },
                setCount: function () {
                    this.list[0].num = this.listCompany.length;
                    for (var n1 = 0; n1 < this.list.length; n1++) {
                        if (n1!=0){
                            this.list[n1].num = 0;
                          

                        }
                        for (var n2 = 0; n2 < this.listCompany.length; n2++) {


                            if (this.listCompany[n2].Department == this.list[n1].Company) {
                                if (this.list[n1].num) {
                                    this.list[n1].num = this.list[n1].num + 1;

                                } else {
                                    this.list[n1].num = 1;
                                }
                            }

                        }
                       
                     }

                }

            }
        });
        $(document).ready(function () {
            //获取公司
            httppost("ups/ztpls/bl/PullCompany", { pageIndex: 1, pageSize: 0, IsDeleted: false, condition: {}, ComapnyName: "1" }

                ,
                function (data) {
                    var listtime = data.data.result;
                    for (var n1 = 0; n1 < listtime.length; n1++) {
                        var t = listtime[n1];
                        t.num = 0;
                        list.addlist(t);
                    }
                    list.getDevice();
                    list.getCart(list.list[0]);

                   
                    //console.log(data.data.result)
                },
                function (err) { })

        })

    </script>
</body>
</html>